<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <style>
        .red{
            background: red;
        }
        .blue{
            background: blue;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            {% for p in fruit %}
                {% if loop.first %}
                    <li class="red">{{ p }}</li>
                {% elif loop.last %}
                    <li>{{ p }}</li>
                {% else %}
                    <li>{{ p }}</li>
                {% endif %}
            {% endfor %}
        </ul>
        <hr/>
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>书名</td>
                    <td>作者</td>
                    <td>价格</td>
                </tr>
            </thead>
            <tbody>
                {% for book in books %}
                    {% if loop.first %}
                        <tr class="red">
                    {% elif loop.last %}
                        <tr class="blue">
                    {% else %}
                        <tr>
                    {% endif %}
                        <td>{{ loop.index }}</td>
                        <td>{{ book.name }}</td>
                        <td>{{ book.author }}</td>
                        <td>{{ book.price }}</td>
                    </tr>
                {% endfor %}

            </tbody>
        </table>
    </div>
</body>
</html>
